<template>
  <div class="whole">
    <el-form
      ref="studentScore"
      class="studentScore"
      :model="studentScore"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="name" label="姓名：">
        <el-input v-model.trim="studentScore.name"> </el-input>
      </el-form-item>

      <el-form-item prop="code" label="学号：">
        <el-input v-model="studentScore.code"> </el-input>
      </el-form-item>

      <el-form-item prop="onlineScore" label="在线成绩：">
        <el-input v-model.number="studentScore.onlineScore"> </el-input>
      </el-form-item>

      <el-form-item prop="classScore" label="课堂成绩：">
        <el-input v-model.number="studentScore.classScore"> </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="studentScoreSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.studentScore.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "Member",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      studentScore: {
        name: null,
        code: null,
        classScore: null,
        onlineScore: null,
        scoreId: 0,
      },
      /*      rules: {
          username: [
              {required: true,   message: '请输入账号', trigger: 'blur'},
              {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
              {required:true, validator:this.validateItem ,trigger:'blur'}
              ],
          password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              ],
          }
      */
      rules: {
        name: [
          {
            required: true,
            min: 2,
            max: 4,
            trigger: "blur",
            message: "用户名必须是2-4个字符",
          },
        ],
        code: [
          {
            pattern: /^\d{7}$/,
            trigger: "blur",
            message: "学号由7位纯数字构成",
          },
        ],
        onlineScore: [
          {
            required: true,
            trigger: "blur",
            message: "分数不能为空",
          },
          {
            type: "number",
            trigger: "blur",
            message: "分数必须是数字",
          },
          {
            validator: this.validatePropOnlineScore,
            trigger: "blur",
            message: "分数必须在0-100之间",
          },
        ],
        classScore: [
          {
            required: true,
            trigger: "blur",
            message: "分数不能为空",
          },
          {
            type: "number",
            trigger: "blur",
            message: "分数必须是数字",
          },
          {
            validator: this.validatePropOnlineScore,
            trigger: "blur",
            message: "分数必须在0-100之间",
          },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    validatePropOnlineScore(rule, value, callback) {
      console.log(value);
      if (value < 0 || value > 100) {
        return callback(new Error("分数必须在0-100之间"));
      } else {
        return callback();
      }
    },
    studentScoreSubmit() {
      this.$refs.studentScore.validate((valid) => {
        if (valid) {
          this.$http({
            method: "put",
            url: "/studentScore",
            data: this.studentScore,
          }).then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
              //this.total = res.data.total;
              //this.newsResults = res.data.results;
            },
            (error) => {
              console.log(error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过，请重新填表");
        }
      });
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style scoped>
/*<style lang='scss' scoped>*/
.whole {
  background-color: rgba(213, 244, 67, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
}
.studentScore {
  width: 350px;
  margin-top: 50px;
}
</style>
